blog

Polyglot으로 다국어 블로그 만들기

· 5 min to read
Polyglot으로 다국어 블로그 만들기

아티클의 독자를 전 세계로 늘리고자 블로그에 다국어 기능을 추가하기로 했습니다.

직접 만들기는 귀찮으니 Polyglot을 이용해 봅시다.


Polyglot이란?

Polyglot은 Jekyll 생태계의 오픈 소스 다국어 플러그인으로, 공식 문서에 따르면 기존에 Jekyll 생태계에서 다국어 지원에 많이 사용되던 jekyll-multiple-languages-plugin에 불편을 느껴 개발했다고 합니다.


Polyglot 적용하기

먼저 플러그인 설치를 위해 Gemfile 번들러에 Polyglot을 추가합니다.

gem 'jekyll-polyglot'

이후, 프로젝트의 _config.yml 파일에 플러그인을 등록하고 플러그인 기본 설정을 추가합니다.

parallel_localization 변수는 병렬 처리 설정입니다. 해당 설정이 켜져 있으면 Jekyll은 빌드 시 포크 방식으로 병렬 컴파일을 시도하는데, Window 환경에서는 해당 설정을 사용할 수 없습니다.

plugins:
  - jekyll-polyglot

# Multilingual Settings
languages: ["ko", "en"]
default_lang: "ko"
exclude_from_localization: ["images", "js"]
parallel_localizaion: false

기존에 작성한 마크다운 페이지 문서의 머릿말에 이 문서의 언어 정보를 지정합니다.

default_lang으로 설정되지 않은 언어가 적용된 페이지의 경로는 devlee.com/en/blog/{permalink}과 같이 자동 설정됩니다.

---
lang: ko
permalink: /blog/pinpoint
title:  Pinpoint 적용하기
description: Naver Pinpoint 도입기
---

영문 경로에 접속하여 확인해 보면, 정상적으로 다국어 페이지가 분리되어 있는 것을 확인할 수 있습니다.

화면 내 적당한 위치에 언어 변경 버튼을 등록하여 웹페이지 내에서 언어 변경을 할 수 있도록 합니다.

<ul class="nav-lang">

  {% for lang in site.languages %}
  <li id="lang" style="float: right;">
    <a style="{% if lang == site.active_lang %}font-weight: bold;{% endif %}text-align:center;" href="{% if lang == site.default_lang %} {{site.baseurl}}{{page.url}} {% else %} {{site.baseurl}}/{{ lang }}{{page.url}} {% endif %}">
      {{ lang }}
    </a>
  </li>
  {% endfor %}

</ul>


GitHub Page 배포 자동화하기

GitHub는 보안 정책상 허가되지 않은 Jekyll 플러그인의 실행을 막고 있습니다. 그렇기에 GitHub Page로 웹페이지를 호스팅한다면 Polyglot을 사용할 수 없습니다. 이를 해결하기 위해서는 매 반영마다 파일을 별도로 빌드하여 빌드 파일을 호스팅해야 하는데, 이럴 경우 귀찮고 Repository 관리도 어려워지는 문제가 있으나 GitHub Action을 활용하여 이 과정을 자동화시킬 수 있습니다.

블로그 원본 파일을 업로드하는 site 브랜치와 GitHub Page 호스팅이 연결된 main 브랜치를 분리합니다. 이후, GitHub Action에 자동 빌드 step Action을 추가하여 site 페이지에 내용이 추가될 때마다 자동으로 빌드 후 빌드된 내용만 main 브랜치로 자동 반영되도록 설정합니다.

name: Jekyll site CI

on:
  push:
    branches: [ "site" ]
  pull_request:
    branches: [ "site" ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Build the site in the jekyll/builder container
      run: |
        docker run \
        -v $:/srv/jekyll -v $/_site:/srv/jekyll/_site \
        jekyll/builder:latest /bin/bash -c "chmod -R 777 /srv/jekyll && jekyll build --future"

    - name: Push
      uses: s0/git-publish-subdir-action@develop
      env:
          REPO: self
          BRANCH: main
          FOLDER: _site
          GITHUB_TOKEN: $
          MESSAGE: "Build: ({sha}) {msg}"

You may also like